<template lang="pug">
div
  div.layout(v-if='ready')
    Menu(mode='horizontal', theme='dark', :active-name='userMenuActive')
      div.container
        div.layout-logo
          //- img.img-responsive(src='http://placehold.it/120x40?text=LOGO')
          router-link(to='/')
            img.img-responsive(src='./assets/logo.svg')
          //- span 内容管理平台
        div.layout-navi.pull-right
          Submenu(name='login')
            template(slot='title')
              Avatar.va-middle(icon='android-person', :src='app.logo')
              span.va-middle(style="margin-left: 8px") {{ app.name }}

            MenuItem(name='account')
              router-link(to='/account')
                span.layout-text 账号信息

            MenuItem(name='password')
              router-link(to='/password/edit')
                span.layout-text 修改密码

            MenuItem(name='logout')
              span(@click='logout') 注销

    //- div.layout-header
      Button(type='text', @click='toggleClick')
        Icon(type='navicon', size='32')
      div.user-shortcuts
        router-link(to='/login') 登录
    div.layout-content.container
      Row(type='flex')
        Col(:span='spanLeft', v-if='spanLeft')
          Menu.menu(width='auto', theme='light', :active-name='activeName', :open-names='openName')
            template(v-for='menu in filteredMenus')
              MenuItem(v-if='menu.path', :key='menu.name', :name='menu.name', @select='selectMenuItem')
                router-link(:to='menu.path')
                  //- Icon(:type='menu.icon', :size='iconSize')
                  img.menu-icon(:src='require(`./assets/icons/${menu.icon}.svg`)')
                  span.layout-text {{ menu.title }}

              Submenu(v-if='menu.children', :name='menu.name', :key='menu.name')
                template(slot='title')
                  //- Icon(:type='menu.icon', :size='iconSize')
                  img.menu-icon(:src='require(`./assets/icons/${menu.icon}.svg`)')
                  span.layout-text {{ menu.title }}
                MenuItem(v-for='child in menu.children', :key='child.name', :name='child.name')
                  router-link(:to='child.path')
                    //- Icon(:type='child.icon', :size='iconSize')
                    img.menu-icon(:src='require(`./assets/icons/${child.icon}.svg`)')
                    span.layout-text {{ child.title }}

        Col(:span='spanRight')
          div.layout-content-main
            router-view
    div.layout-copy
      | Copyright &copy; 晓安科技
  Spin(v-else, fix)
</template>

<script>
import { mapState, mapActions } from 'vuex'
import store from '@/store'

const menuItems = {
  'settings': { name: 'settings', path: '/settings', icon: 'setting', title: '基础设置' },
  'question-list': { name: 'question-list', path: '/questions', icon: 'list', title: '问题管理' },
  'question-category': { name: 'question-category', path: '/questions/categories', icon: 'category', title: '问题分类管理' },
  'question-member': { name: 'question-member', path: '/members', icon: 'member', title: '回答成员设置' },
  'media-list': { name: 'media-list', path: '/media', icon: 'list', title: '内容管理' },
  'media-category': { name: 'media-category', path: '/media/categories', icon: 'category', title: '视听分类管理' },
  'article-list': { name: 'article-list', path: '/articles', icon: 'list', title: '图文管理' },
  'article-category': { name: 'article-category', path: '/articles/categories', icon: 'category', title: '图文分类管理' },
  'slideshows': { name: 'slideshow-list', path: '/slideshows', icon: 'list', title: '幻灯片管理' },
  'pages': { name: 'page-list', path: '/pages', icon: 'list', title: '页面管理' },
  'menu': { name: 'menu', path: '/menus', icon: 'menu', title: '菜单设置' }
}

const menus = [
  /* menuItems['settings'],
  {
    name: 'question',
    icon: 'qa',
    // icon: 'help-circled',
    title: '问答模块',
    children: [
      menuItems['question-list'],
      menuItems['question-category'],
      menuItems['question-member']
    ]
  },
  {
    name: 'media',
    icon: 'media',
    // icon: 'ios-film-outline',
    title: '视听模块',
    allows: ['standard', 'pro'],
    children: [
      menuItems['media-list'],
      menuItems['media-category']
    ]
  }, */
  {
    name: 'article',
    icon: 'article',
    // icon: 'ios-paper',
    title: '图文模块',
    children: [
      menuItems['article-list'],
      menuItems['article-category']
    ]
  },
  menuItems['slideshows'],
  menuItems['pages'],
  menuItems['menu']
]

export default {
  beforeRouteEnter (to, from, next) {
    store.dispatch('init').then(() => next())
  },
  data () {
    let data = {
      // spanLeft: 5,
      // spanRight: 19
    }

    let activeMenuItem = Object.values(menuItems).find(item => {
      return item.path === this.$route.path
    })

    data.activeName = activeMenuItem && activeMenuItem.name
    data.openName = activeMenuItem && activeMenuItem.name.split('-')

    return data
  },
  computed: {
    spanLeft () {
      return this.$route.meta.hideMenu ? 0 : 5
    },
    spanRight () {
      return this.$route.meta.hideMenu ? 24 : 19
      // return 24 - this.spanLeft
    },
    iconSize () {
      return this.spanLeft === 5 ? 14 : 24
    },
    filteredMenus () {
      return menus.filter(menu => {
        return menu.allows ? menu.allows.includes(this.app.type) : true
      })
    },
    activeMenuItem () {
      return Object.values(menuItems).find(item => {
        return item.path === this.$route.path
      })
    },
    userMenuActive () {
      return this.$route.path.split('/')[1]
    },
    ...mapState({
      ready: state => state.app.ready,
      app: state => state.app.info
    })
  },
  mounted () {
    // this.init()
  },
  methods: {
    toggleClick () {
      if (this.spanLeft === 5) {
        this.spanLeft = 2
        this.spanRight = 22
      } else {
        this.spanLeft = 5
        this.spanRight = 19
      }
    },
    selectMenuItem (evt, name) {
      console.log(evt, name)
    },
    ...mapActions([
      'init',
      'logout'
    ])
  },
  watch: {
    // $route (val) {
    //   if (val.meta.hideMenu) {
    //     this.spanLeft = 0
    //     this.spanRight = 24
    //   }
    // }
  }
}
</script>

<style lang='less' scoped>
.layout {
  // border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  // border-radius: 4px;
  overflow: hidden;
  min-height: 100vh;
}

.layout-breadcrumb {
  padding: 10px 15px 0;
}

.layout-content {
  min-height: 200px;
  // min-height: 60vh;
  margin-top: 20px;
  margin-bottom: 60px;

  background: #fff;
  border-radius: 4px;
}

.layout-content-main {
  padding: 20px;
}

.layout-copy {
  text-align: center;
  padding: 10px 0 20px;
  color: #9ea7b4;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-menu-left {
  background: #fff;
  /* background: #464c5b; */
}

.menu {
  // height: 100vh;
  height: 100%;
}

.menu a {
  // color: #5b6270;
  color: inherit;
  display: block;
  padding: 14px 24px;
}

.layout-header {
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

.layout-logo {
  // width: 100px;
  height: 25px;
  // background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 17px;
  left: 0px;

  img {
    height: 100%;
    width: auto;
  }
}

.layout-ceiling-main a {
  color: #9ba7b5;
}

.layout-hide-text .layout-text {
  display: none;
}

.ivu-col {
  // transition: width .2s ease-in-out;
}

.layout-navi {

  a {
    color: inherit;
  }
}

.menu {
  .ivu-menu-item {
    padding: 0 !important;
  }
  .ivu-menu-submenu .ivu-menu-item a{
    padding-left: 43px;
  }

  &-icon {
    width: 30px;
    height: 16px;
    vertical-align: middle;
  }

  .layout-text {
    vertical-align: middle;
  }
}

.user-shortcuts {
  float: right;
}
</style>

<style scoped>

  .ivu-menu-item .ivu-icon {
    margin-right: 8px;
  }
</style>
